<template>
  <div class="my">
    <div class="top">
      <div class="head">
        <!--<img src="@/static/test/null.jpg" alt="" srcset="">-->
        <img :src="userInfo.headimgurl" alt="" />
      </div>
      <div class="con">
        <div class="name">{{userInfo.nickname}}</div>
        <div class="id">uid15641612164651246</div>
      </div>
      <div class="code">
        <span class="icon"></span>
      会员码
      </div>
    </div>
    <div class="center">
      <router-link :to="'/' + enterpriseId + '/charge/amount'"  class="item">
        <div class="amount">￥100</div>
        <div class="text">卡余额</div>
      </router-link>
      <div class="line"></div>
      <router-link :to="'/' + enterpriseId + '/coupon'"  class="item">
          <div class="amount">5</div>
        <div class="text">优惠劵</div>
      </router-link>
      <div class="line"></div>
      <router-link :to="'/' + enterpriseId + '/point'"  class="item">
        <div class="amount">1000</div>
        <div class="text">积分</div>
      </router-link>
    </div>
    <div class="vip">
      <div  class="title">
      <div class="icon">
      </div>
      金卡会员</div>
      <div class="text">距离升级到下一级还需要100成长值</div>
      <div class="right">会员权益</div>
    </div>
    <div class="bottom">
      <nuxt-link class="item" :to="'/charge/?enterpriseId=' + enterpriseId" tag="div">
        <div class="icon"></div>
        <div class="text">电子卡会员卡</div>
      </nuxt-link>
      <nuxt-link class="item" :to="'/' + enterpriseId + '/order'" tag="div">
        <div class="icon"></div>
        <div class="text">消费记录</div>
      </nuxt-link>
      <div class="item">
        <div class="icon"></div>
        <div class="text">开具发票</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="text">爱车资料</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="text">油站导航</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="text">推荐有奖</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="text">车队卡</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="text">支付设置</div>
      </div>
      
    </div>
  </div>
</template>

<script>
import { mapState,mapGetters,mapActions } from "vuex";
export default {
  head() {
    return {
      title: "我的",
    };
  },
  data() {
    return {
      images: [],
      list: [],
      loading: false, //加载状态
      finished: false, //是否完成加载
      refreshing: false, //是否正在上拉刷新
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    ...mapState({
      // pointInfo: (state) => state.point.pointInfo,
      
    }),
  },
  mounted() {
    // this.getPointInfo();
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
  },
};
</script>

<style lang="scss">
.my {
  padding: 0.33rem;
  width: 100vw;
  box-sizing: border-box;

  .top {
    position: relative;
    height: 0.88rem;
    width: 100%;

    .head {
      left: 0.33rem;
      top: 2.16rem;
      width: 0.88rem;
      height: 0.88rem;
      border-radius: 0.44rem;
      background: rgb(0, 0, 0);
      position: absolute;
      left: 0;
      top: 0;
      >img{
        width: 100%;
        height: 100%;
      }
    }
    .con {
      position: absolute;
      left: 1.3rem;
      display: flex;
      height: 0.88rem;
      justify-content: space-between;
      flex-direction: column;
      padding: 0.05rem 0;
      box-sizing: border-box;
      .name {
        height: 0.35rem;
        color: rgba(244, 207, 137, 100);
        font-size: 0.25rem;
        text-align: left;
      }
      .id {
        height: 0.3rem;
        color: #9f9fb4;
        font-size: 0.21rem;
        text-align: left;
      }
    }
    .code {
      position: absolute;
      right: 0rem;
      top: 0.2rem;
      width: 1.49rem;
      height: 0.63rem;
      line-height: 0.63rem;
      border-radius: 1.05rem;
      color: rgba(16, 16, 16, 100);
      font-size: 0.25rem;
      text-align: center;
      font-family: Arial;
      border: 0.02rem solid rgba(187, 187, 187, 100);
      >.icon{
        display: inline-block;
        width:0.25rem;
        height:0.27rem;
        margin-bottom: -0.03rem;
        background: url("../../static/vip/scan.png") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
  .center {
    margin-top:0.6rem;
    display: flex;
    justify-content: space-around;
    text-align:center;
    height:1rem;
    .item{
      display: flex;
      justify-content: space-around;
      text-align:center;
      flex-direction: column;

      
      .amount{
        height: 0.42rem;
        color: rgba(174, 115, 5, 100);
        font-size: 0.28rem;
        font-weight:bolder;

      }
      .text{
        height: 0.32rem;
        color: rgba(174, 115, 5, 100);
        font-size: 0.21rem;
      }
    }
    .line{
      width: 1px;
      height: 0.7rem;
      margin-top: 0.2rem;
      background-color:#dbdbdb;
    }
  }
  .vip{
    margin-top:0.4rem;
    height: 1.2rem;
    line-height: 0.35rem;
    border-radius: 0.21rem 0.21rem 0.21rem 0.21rem;
    background-color: rgba(244, 207, 137, 100);
    text-align: center;
    border: 0.02rem solid rgba(244, 207, 137, 100);
    box-sizing: border-box;
    position: relative;
    .title {
      height: 0.25rem;
      color: rgba(143, 147, 78, 100);
      font-size: 0.25rem;
      //font-size: 0.21rem;
      position: absolute;
      font-weight:900;
      top: 0.15rem;
      left: 0.2rem;
      >.icon{
        display: inline-block;
        width:0.25rem;
        height:0.25rem;
        background: url("../../static/vip/vip-line.svg") no-repeat 0 0;
        background-size: 100% 100%;
        margin-bottom: -0.02rem;
      }
    }
    .text{
      position: absolute;
      bottom: 0.15rem;
      left: 0.2rem;
      height: 0.35rem;
      color: rgba(143, 147, 78, 100);
      font-size: 0.18rem;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .right{
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;
      width: 1.49rem;
      height: 0.63rem;
      line-height: 0.63rem;
      border-radius: 1.05rem;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(143, 147, 78, 100);
      font-size: 0.21rem;
      text-align: center;
      font-family: Arial;
      border: 0.02rem solid rgba(194, 198, 122, 100);
      background-color:#f4cf89
    }
  }
  .bottom {
    height: 3.2rem;
    width:6.8rem;
    margin:0 auto;
    margin-top:0.4rem;
    //background-color:#f4cf89;
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;

    .item{
      width:1.7rem;
      height:1.5rem;
      //background-color:#c2af8d;
      display: flex;
      justify-content: space-around;
      flex-direction: column; 
      align-items: center;
        .icon{
          width: 0.39rem;
          height: 0.39rem;
          background-color: rgba(240, 210, 153, 100);
          background-size: 100% 100%;
        }
        .text{
          text-align:center;
          left: 0.56rem;
          height: 0.32rem;
          color: rgba(87, 87, 87, 100);
          font-size: 0.21rem;
          text-align: center;
          font-weight: bold;
          font-family: SourceHanSansSC-regular;
        }
    }
    .item:nth-child(1){
      .icon{
        background: url("../../static/vip/a1.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(2){
      .icon{
        background: url("../../static/vip/a2.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(3){
      .icon{
        background: url("../../static/vip/a3.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(4){
      .icon{
        background: url("../../static/vip/a4.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(5){
      .icon{
        background: url("../../static/vip/a5.svg") no-repeat 0 0;
        background-size: 100% 100%;
        
      }
    }
    .item:nth-child(6){
      .icon{
        background: url("../../static/vip/a6.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(7){
      .icon{
        background: url("../../static/vip/a7.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(8){
      .icon{
        background: url("../../static/vip/a8.svg") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
